<!--
 * @Author: wuwle
 * @Date: 2020-11-30 23:05:08
 * @LastEditors: wuwle
 * @LastEditTime: 2020-12-04 00:39:59
 * @FilePath: \demo\复习\css\案例\多行文字后隐藏\多行文本.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        position: relative;
        line-height: 1.4em; /*行高和height成倍数，这里以三行文本超出隐藏举例*/
        height: 4.2em; /*控制显示几行*/
        overflow: hidden;
      }
      p::after {
        /*若要兼容IE8需用:after*/
        content: '...'; /*替换内容比较灵活*/
        position: absolute;
        bottom: 2px;
        right: 9px;
        padding: 0 3px;
        background: #fff; /*颜色和文字背景保持一致*/
        box-shadow: 0 0 10px #fff; /*边缘处理*/、
      }
    </style>
  </head>
  <body>
    <p>
      戏一折 水袖起落 唱悲欢唱离合 无关我 扇开合 锣鼓响又默 戏中情戏外人 凭谁说
      惯将喜怒哀乐都融入粉墨 陈词唱穿又如何 白骨青灰皆我 乱世浮萍忍看烽火燃山河
      位卑未敢忘忧国 哪怕无人知我 台下人走过 不见旧颜色 台上人唱着 心碎离别歌
      情字难落墨 她唱须以血来和 戏幕起 戏幕落 谁是客 戏一折 水袖起落
      唱悲欢唱离合 无关我 扇开合 锣鼓响又默 戏中情戏外人 凭谁说
      惯将喜怒哀乐都融入粉墨 陈词唱穿又如何 白骨青灰皆我 乱世浮萍忍看烽火燃山河
      位卑未敢忘忧国 哪怕无人知我 台下人走过 不见旧颜色 台上人唱着 心碎离别歌
      情字难落墨 她唱须以血来和 戏幕起 戏幕落 谁是客 你方唱罢我登场 莫嘲风月戏
      莫笑人荒唐 也曾问青黄也曾铿锵唱兴亡 道无情 道有情 怎思量
    </p>
  </body>
</html>
